<template>
  <div class="cs-popup" v-if="isShowPopup">
    <header :class="{ danger: blackData.data.entity.overweightType === 3 }">
      <span>报警助手</span>
      <div>
        <i class="el-icon-minus closeIcon" @click="changeSize"></i>
        <i class="el-icon-close closeIcon" @click="closeBtnClick"></i>
      </div>
    </header>
    <section>
      <div class="warning-title">
        <el-tag v-if="blackData.isBlacklist === 1" effect="dark" type="danger">黑名单预警</el-tag>
        <el-tag v-if="blackData.isOverload === 1" effect="dark" type="warning">超载预警</el-tag>
      </div>
      <div class="overrunAlarmBox">
        <div>
          <span class="infoText">
            <span>类型：</span>
            {{ blackData.data.entity.carType }}
          </span>
          <br />
          <span class="infoText">
            <span>车牌： </span>
            <cs-tag>
              {{
                blackData.data.entity.carNum.length > 7 ? '误识别' : blackData.data.entity.carNum
              }}
            </cs-tag>
          </span>
          <br />
          <span class="infoText">
            <span>时间：</span>
            {{ blackData.data.entity.createTime }}
          </span>
          <br />
          <span class="infoText">
            <span>站点：</span>
            {{ blackData.data.entity.siteName }}
          </span>
          <br />
          <span class="infoText">
            <span>超重：</span>
            {{
              blackData.data.entity.totalWeight - blackData.data.entity.stdWeight < 0
                ? 0
                : (
                  (blackData.data.entity.totalWeight - blackData.data.entity.stdWeight) /
                  1000
                ).toFixed(2)
            }}t
            <cs-warning-label
              v-if="blackData.data.entity.overRate"
              :level="getStepType(blackData.data.entity.overweightType)"
              :percent="`${(blackData.data.entity.overRate * 100).toFixed(0)}%`"
              width_L="width: 20px"
            />
          </span>
          <br />
          <span class="infoText">
            <span>限重：</span>
            {{ (blackData.data.entity.stdWeight / 1000).toFixed(2) }}t
          </span>
          <span class="infoText">
            <span>总重：</span>
            {{ (blackData.data.entity.totalWeight / 1000).toFixed(2) }}t
          </span>
          <br />
          <el-link type="primary" @click="goDetail">查看详情</el-link>
        </div>
        <el-image
          v-if="blackImg.length > 0"
          :src="blackImg[0]"
          :fit="'fill'"
          @click="showPicDialog(blackImg)"
          @error="imgLoadingErrorEvent"
        >
          <div slot="error" class="image-slot">
            <span>上传中...</span>
          </div>
        </el-image>
      </div>
    </section>
    <el-dialog :modal-append-to-body="false" :visible.sync="PicDialog" width="60%">
      <el-carousel indicator-position="outside" height="600px" :autoplay="false">
        <el-carousel-item v-for="(item, key) in clone_blackImg" :key="key">
          <el-image style="width: 100%; height: 100%" :src="item" :fit="'fill'"></el-image>
        </el-carousel-item>
      </el-carousel>
    </el-dialog>
  </div>
</template>

<script>
import csTag from '@/components/cs-tag/cs-tag.vue'
import csWarningLabel from '@/components/cs-warningLabel/cs-warningLabel.vue'
import _ from 'lodash'
import { mapState } from 'vuex'

export default {
  name: 'CsPopup',
  components: {
    csTag,
    csWarningLabel
    // csBtn
  },
  props: {
    blackData: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      PicDialog: false,
      clone_blackImg: []
    }
  },
  created() {
  },
  watch: {},
  computed: {
    ...mapState('m_msg', ['isShowPopup']),
    blackImg() {
      return _.compact(
        this.blackData.data.mediaUrl
          .filter((item) => item.type === 1)
          .map((item) => item.pictureUrl)
      )
    }
  },
  methods: {
    imgLoadingErrorEvent(e) {
      console.warn(e)
    },
    handleClick(tab, event) {
      // console.log(tab, event)
    },
    closeBtnClick() {
      this.$emit('closeBtnClick')
    },
    goDetail() {
      // this.$router.push('/home/data_search/detail' + this.overloadData.entity.carId)
      this.$bus.$emit('carManageJunkToDetail', {
        id: this.blackData.data.entity.id,
        dataId: this.blackData.data.entity.carId,
        carNumber: this.blackData.data.entity.carNum,
        fromSource: 'car'
      })
    },
    changeSize() {
      this.$emit('small-click', true)
    },
    showPicDialog(Images) {
      console.log('当前图片', Images)
      this.clone_blackImg = _.cloneDeep(Images)
      this.PicDialog = true
    },
    getStepType(type) {
      if (type === 0) {
        return 'success'
      } else if (type === 1) {
        return 'warning'
      } else if (type === 2) {
        return 'serious'
      } else {
        return 'danger'
      }
    }
  }
}
</script>

<style lang="less" scoped>
.cs-popup {
  position: fixed;
  right: 0;
  bottom: 0;
  width: 462px;
  height: 332px;
  z-index: 999;
}

header {
  display: flex;
  justify-content: space-between;
  height: 39px;
  line-height: 39px;
  font-size: 16px;
  color: #fff;
  background-color: #006eff;
  padding: 0 16px;
}

header div i {
  margin-left: 20px;
}

section {
  height: calc(100%);
  background-color: #fff;
  padding: 0 16px;
}

/* 修改el-tabs样式start */
.el-tabs ::v-deep .el-tabs__nav {
  float: none;
  text-align: center;
  padding: 0 120px;
}

.el-tabs ::v-deep .el-tabs__active-bar {
  width: 8% !important;
  left: 140px;
  background-color: #006eff;
}

.el-tabs ::v-deep .el-tabs__item.is-active {
  color: #006eff;
}

.el-tabs ::v-deep .el-tabs__item {
  color: rgba(0, 110, 255, 0.5);
}

/* 修改el-tabs样式end */

.cs-tag {
  display: inline-block;
  width: 76px;
  height: 20px;
  line-height: 20px;
  text-align: center;
}

.overrunAlarmBox {
  display: flex;
  width: 100%;
  height: 170px;

  .el-image {
    width: 215px;
    height: 170px;
  }
}

.infoText {
  display: inline-block;
  margin-bottom: 4px;
  padding-right: 14px;
  font-size: 14px;
  color: #524d4a;
}

.cs-warning-label {
  display: inline-block;
  width: 76px;
  height: 20px;
  line-height: 20px;
  font-size: 14px;
  margin-top: 0;
  margin-left: 26px;
  margin-bottom: 0;
  vertical-align: bottom;
}

.overrunAlarm_btnBox {
  text-align: center;
  margin-top: 24px;
}

.cs-btn {
  margin-right: 48px;
}

.cs-btn:last-child {
  margin-right: 0;
}

.warning-title {
  padding: 10px 0;
}

.el-tag {
  margin-right: 5px;
}

.danger {
  background-color: #f56c6c !important;
}

::v-deep .image-slot {
  height: 100%;
  width: 100%;
  background-color: #eee;
  display: flex;
  justify-content: center;
  align-items: center;
}

.closeIcon {
  cursor: pointer;
}
</style>
